<template>
  <div>
      <el-dialog
            title='创建用户'
            :visible="visible"
            >
            <div style="height:300px;">
            <el-form :model="form">
                <el-form-item 
                label="用户名：" 
                label-width="70px">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码：" label-width="70px">
                    <el-input v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="手机号：" label-width="70px">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱：" label-width="70px">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label='角色：' label-width="70px">
                    <el-select v-model="form.roles">
                        <el-option v-for="i in role_list" :key="i.id" :label='i.name' :value="i.id"></el-option>
                    </el-select>         
                </el-form-item>
            </el-form>
            </div>
            <div slot='footer' class="dialog-footer">
                <el-button @click="foot">取消</el-button>
                <el-button type="primary" @click="add">确认</el-button>
            </div>
            
      </el-dialog>
  </div>
</template>

<script>
export default {
    props:['visible'],
    data(){
        return{
            form:{},
            role_list:[{'id':1,'name':'管理员'},{'id':2,'name':'普通用户'}]
            
        }
    },
    methods:{
        add(){
            alert('添加')
            //隐藏对话框
            this.$emit('update:visible',false)
        },
        foot(){
            this.$emit('update:visible',false)
        }
    }
}
</script>

<style>
    .mybox {

        height: 300px;
        float: left;
        overflow: hidden;
}
</style>